<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"/>


    <!-- All Vendor & plugins CSS include -->
    <link href="css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        form {
            margin-left: 470px;
            padding: 0;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: white;
        }

        a:hover {
            text-decoration: none;
            color: white;
        }
    </style>


</head>
<body>
<!-- Start Header Area -->
<header class="header-area">
    <!-- main header start -->
    <div class="main-header d-none d-lg-block">
        <!-- header top start -->
        <div class="header-top bdr-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="welcome-message">
                            <p>欢迎光临花语在线订花系统</p>
                        </div>
                    </div>
                    <div class="col-lg-6 text-right">
                        <div class="header-top-settings">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->

        <!-- header middle area start -->
        <div class="header-main-area sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- start logo area -->
                    <div class="col-lg-3">
                        <div class="logo">
                            <a href="index.html">
                                <h2> HUA YU </h2>
                            </a>
                        </div>
                    </div>
                    <!-- start logo area -->

                    <!-- main menu area start -->
                    <div class="col-lg-6 position-static">
                        <div class="main-menu-area">
                            <div class="main-menu">
                                <!-- main menu navbar start -->
                                <nav class="desktop-menu">
                                    <ul>
                                        <li><a href="store_personal.html">店铺管理</a></li>
                                        <li><a href="store.html">商品管理</a></li>
                                        <li><a href="shopping.html">订单管理</a></li>
                                    </ul>
                                </nav>
                                <!-- main menu navbar end -->
                            </div>
                        </div>
                    </div>
                    <!-- main menu area end -->

                    <!-- mini cart area start -->
                    <div class="col-lg-3">
                        <div class="header-configure-wrapper">
                            <div class="header-configure-area">
                                <ul class="nav justify-content-end">
                                    <li class="user-hover">
                                        <a href="#" title="个人中心">
                                    <li><img src="{{result.store.simg}}" style="width: 60px" height="60px"></li>
                                    </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <h4>退出</h4>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- mini cart area end -->

                </div>
            </div>
        </div>
        <!-- header middle area end -->
    </div>
    <!-- main header start -->
</header>
<!-- end Header Area -->

<!-- main wrapper start -->
<main>
    <div class="container" id="container">
        <!-- breadcrumb area start -->
        <div class="breadcrumb-area common-bg">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="breadcrumb-wrap">
                            <nav aria-label="breadcrumb">
                                <h1>查看商品</h1>
                                <br>
                                <input type="text" placeholder="请输入花朵名称" id="fname" />
                                <button type="button" class="btn btn-danger" id="searchFlower">搜索</button>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- breadcrumb area end -->

        <!-- page main wrapper start -->
        <div class="shop-main-wrapper section-space pb-0">
            <div class="container">
                <div class="row">
                    <!-- shop main wrapper start -->
                    <!--v-for="store in data.data"-->
                    <div class="col-lg-9 order-1 order-lg-2" id="divmain">
                        <!-- product item list wrapper start -->
                        <div class="shop-product-wrap grid-view row mbn-40">
                            <!-- product single item start -->
                            <div class="col-md-4 col-sm-6" v-for="obj in result.data">
                                <!-- product grid start -->
                                <div class="product-item">
                                    <figure class="product-thumb">
<!--                                        <a href="#" v-on:click="searchDetail(obj.fid)">-->
                                            <img v-bind:src="obj.cover" alt="store">
                                        </a>
                                    </figure>
                                    <div class="product-caption">
                                        <p class="product-name">
                                            <a href="#" v-on:click="searchDetail()">花朵名称:{{obj.fname}}</a>
                                        </p>
                                        <div class="price-box">
                                            <span class="price-regular">单价:{{obj.price}}</span>
                                        </div>
                                        <br>
                                        <div class="price-box">
                                            <span class="price-regular">总销量:{{obj.total}}</span>
                                        </div>
                                    </div>
                                </div>
                                <!-- product grid end -->
                            </div>

                            <!-- start pagination area -->

                            <!-- end pagination area -->
                        </div>
                        <div class="paginatoin-area text-center">
                            <ul class="pagination-box">
                                <li><a class="previous" href="#" v-on:click="prePage"><i
                                        class="lnr lnr-chevron-left"></i></a></li>
                                <li v-on:click="goToPage(count)" v-for="count in result.pageCount"><a
                                        href="#">{{count}}</a></li>
                                <li><a class="next" href="#" v-on:click="nextPage"><i class="lnr lnr-chevron-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- shop main wrapper end -->
                </div>

            </div>
        </div>
        <!-- page main wrapper end -->
    </div>
</main>


</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/global.js"></script>
<script>

    var currentPage = 1;
    var app = new Vue({
        el: '#container',
        data: {
            sid: 1,
            result: {}
        },
        methods: {
            query_store_flower: function () {
                axios.get(base_url + 'flower/query_store_flower.do/' + this.sid, {params: {currentPage: currentPage}}).then(function (res) {

                    app.result = res.data;
                    console.log(app.result);
                    console.log(res)
                })
            },
            goToPage: function (page) {
                currentPage = page;
                this.query_store_flower(this.sname);
            },
            prePage: function () {
                currentPage--;
                if (currentPage < 1) {
                    currentPage = 1;
                }
                this.query_store_flower(this.sname);
            },
            nextPage: function () {
                currentPage++;
                if (currentPage > this.result.pageCount) {
                    currentPage = this.result.pageCount;
                }
                this.query_store_flower(this.sname);
            }
        },
        mounted: function () {
            this.query_store_flower();
        }
    })

</script>
</html>